<template>
  <el-dialog
    v-model="dialogVisible"
    :title="`${dataInfo ? '修改' : '新增'}司机`"
    width="400"
    label-width="100px"
    @close="handleClose"
  >
    <el-form
      ref="formRef"
      :model="formValues"
      :rules="rules"
      label-width="94px"
      style="padding: 0 20px"
    >
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="formValues.userName" />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-select v-model="formValues.gender" placeholder="请选择性别" style="width: 80px">
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idNum">
        <el-input v-model="formValues.idNum" />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="formValues.phone" />
      </el-form-item>
      <el-form-item label="所属公司" prop="company">
        <el-input v-model="formValues.company" />
      </el-form-item>
      <el-form-item label="车牌号" prop="carNum">
        <el-input v-model="formValues.carNum" />
      </el-form-item>
      <el-form-item label="生产商" prop="producer">
        <el-input v-model="formValues.producer" />
      </el-form-item>
      <el-form-item label="型号" prop="model">
        <el-input v-model="formValues.model" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleOk(formRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue'
import { ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { toNumber } from '@vue/shared'

const props = defineProps({
  visible: Boolean,
  dataInfo: Object
})

const emits = defineEmits<{
  (e: 'ok', p: any): void
  (e: 'cancel'): void
}>()

const dialogVisible = ref(false)
watch(
  () => props.visible,
  () => {
    if (props.visible && !props.dataInfo) {
      formRef.value?.resetFields()
      formValues.value = {
        userName: '',
        gender: '1',
        idNum: '',
        phone: '',
        company: '',
        carNum: '',
        producer: '',
        model: ''
      }
    }
    dialogVisible.value = props.visible
  }
)

const formRef = ref<FormInstance>()

const formValues = ref({
  userName: '',
  gender: '1',
  idNum: '',
  phone: '',
  company: '',
  carNum: '',
  producer: '',
  model: ''
})

const checkIdNum = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入身份证号码'))
  }
  let regEx = /^\d{17}[\dXx]$/
  if (!regEx.test(value)) {
    return callback(new Error('身份证号码格式不符'))
  } else {
    return callback()
  }
}

const checkPhone = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入联系电话'))
  }
  let regEx = /^1[3-9]\d{9}$/
  if (!regEx.test(value)) {
    return callback(new Error('电话号码格式不符'))
  } else {
    return callback()
  }
}

const checkCarNum = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error('请输入车牌号'))
  }
  let regEx =
    /^[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼川贵云渝藏陕甘青宁新]{1}[ABCDEFGHJKLMNOPQRSTUVWXY]{1}[0-9A-Z]{5}$/u
  if (!regEx.test(value)) {
    return callback(new Error('车牌号格式不符'))
  } else {
    return callback()
  }
}

const rules = reactive<FormRules>({
  userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
  idNum: [
    { required: true, message: '请输入身份证号码', trigger: 'blur' },
    { validator: checkIdNum, trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { validator: checkPhone, trigger: 'change' }
  ],
  company: [{ required: true, message: '请输入所属公司', trigger: 'blur' }],
  carNum: [
    { required: true, message: '请输入车牌号', trigger: 'blur' },
    { validator: checkCarNum, trigger: 'change' }
  ],
  producer: [{ required: true, message: '请输入生产商', trigger: 'blur' }],
  model: [{ required: true, message: '请输入型号', trigger: 'blur' }]
})

watch(
  () => props.dataInfo,
  () => {
    if (props.dataInfo) {
      const { userName, gender, idNum, phone, company, carNum, producer, model } = props.dataInfo
      formValues.value = {
        userName,
        gender: gender?.toString(),
        idNum,
        phone,
        company,
        carNum,
        producer,
        model
      }
    }
  }
)

const handleClose = () => {
  formRef.value?.resetFields()
  emits('cancel')
}

const handleOk = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((errors) => {
    if (errors) {
      const { userName, gender, idNum, phone, company, carNum } = formValues.value
      let params: any = {
        company,
        gender: toNumber(gender),
        idNum,
        parentId: 1,
        phone,
        userName,
        password: '123456',
        userType: 1,
        carNum
      }
      if (props.dataInfo) {
        const { id, carNum, producer } = props.dataInfo
        params = {
          ...params,
          id,
          carNum,
          producer
        }
      }
      emits('ok', params)
    } else {
      ElMessage({
        message: '请完善信息',
        type: 'warning'
      })
    }
  })
}
</script>
